<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        textarea{padding: 0}
        .container label{display: block}
        .container textarea{width: 100%;}
        .container .side{
            padding: 8px;
            flex: 1;
        }
        #result{
            padding: 5px 10px;
        }
    </style>
</head>
<body>
<div class="container">
    <div style="display: flex;border: 1px solid #ffd791;overflow: auto;box-shadow: #e1e1e1 2px 2px 3px">
        <div class="left side">
            <label>已有CSS</label>
            <textarea id="origin" rows="20">
@media (max-width: 900px){
 body{width:100%}
}
h1{margin:0 auto}

            </textarea>
        </div>
        <div class="right side">
            <label>需要去除重复内容的CSS</label>
            <textarea id="duplicate" rows="20">
h1{margin:0 auto}
p{font-size:25px}
@media (min-width:1200px) {
div{border:1px solid red}
}
@media (max-width: 900){
body{width:100%}
}
            </textarea>
        </div>
    </div>

    <div style="margin: 10px 0 0 0">
        <button onclick="dedupe()">转换</button>
    </div>
    <div>
        <label>结果</label>
        <textarea id="result"></textarea>
    </div>
</div>

<script>
    // Example POST method implementation:
    async function postData(url = '', data = {}) {
        // Default options are marked with *
        const response = await fetch(url, {
            method: 'POST', // *GET, POST, PUT, DELETE, etc.
            mode: 'cors', // no-cors, *cors, same-origin
            cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
            credentials: 'same-origin', // include, *same-origin, omit
            headers: {
                'Content-Type': 'application/json'
                //'Content-Type': 'application/x-www-form-urlencoded',
            },
            redirect: 'follow', // manual, *follow, error
            referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
            body: JSON.stringify(data) // body data type must match "Content-Type" header
        });
        return response.text(); // parses JSON response into native JavaScript objects
    }

    function dedupe(){
        var origin = document.getElementById('origin').value
        var duplicate = document.querySelector('#duplicate').value
        var result = document.querySelector('#result')
        postData('/css', { a: origin,b:duplicate })
            .then(data => {
                result.value = data
                result.style.height = (result.scrollHeight - 10) + 'px'
                console.log(data); // JSON data parsed by `data.json()` call
            }).catch(e=>{
                result.value = e.message
        });
    }
</script>
</body>
</html>